<template>
    <div class="divBox">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="container">
                    <el-form inline size="small" :label-position="labelPosition">
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
                                <el-col v-bind="grid">
                                    <el-form-item label="公司名称：">
                                        <el-input v-model="userFrom.name" placeholder="请输入公司名称" clearable />
                                    </el-form-item>
                                    <el-form-item label="联系人：">
                                        <el-input v-model="userFrom.username" placeholder="请输入联系人" clearable />
                                    </el-form-item>
                                    <el-form-item label="手机号：">
                                        <el-input v-model="userFrom.phone" placeholder="请输入手机号" clearable />
                                    </el-form-item>
                                    <el-form-item label="区域：" prop="cityName">
                                        <el-cascader v-model="cityName" @change="cityChangesc" :options="cityList"
                                            clearable :props="props"></el-cascader>
                                    </el-form-item>
                                    <el-button type="primary" icon="ios-search" label="default" class="mr15"
                                        size="small" @click="userSearchs">搜索</el-button>
                                    <el-button size="small" type="reset" @click="reset('userFrom')">重置</el-button>
                                    <el-button size="small" type="primary" @click="establish">创建企业</el-button>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-row align="middle" :gutter="10" class="ivu-mt">
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir four">
                                <div class="card_box_cir1 four1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardList.provinceCount || 0" />
                                <span class="sp2">省级代理</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir one">
                                <div class="card_box_cir1 one1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardList.cityCount || 0" />
                                <span class="sp2">市级代理</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir two">
                                <div class="card_box_cir1 two1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardList.countyCount || 0" />
                                <span class="sp2">县级代理</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir three">
                                <div class="card_box_cir1 three1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardList.townCount || 0" />
                                <span class="sp2">俱乐部</span>
                            </div>
                        </div>
                    </el-col>

                </el-row>
            </div>
            <!-- 创建企业 -->
            <!-- <div class="addBusiness" v-if="showBusiness">
          <el-card class="Business_cont">
            <div slot="header" class="clearfix">
              <span>创建企业</span>
              <el-button icon="el-icon-close" @click="showBusiness = false" style="float: right;" size="small"
                circle></el-button>
            </div>
            <el-form ref="Businessform" :model="Businessform" label-width="150px" :rules="rules">
              <el-form-item label="企业Logo：" prop="logo">
                <el-upload class="avatar-uploader" :action="fileUrl" :headers="myHeaders" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="企业名称：" prop="name">
                <el-input v-model="Businessform.name" style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" prop="phone">
                <el-input v-model="Businessform.phone" style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="所属行业：" prop="type_id">
                <el-select v-model="value" placeholder="请选择" @focus="focus" @change="type_idChange">
                  <el-option v-for="item in type_idlist" :key="item.value" :label="item.label"
                    :value="{ value: item.value, label: item.label }">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域：" prop="cityName">
                <el-cascader v-model="cityName" @change="cityChange" :options="cityList" :props="props"></el-cascader>
              </el-form-item>
              <el-form-item label="推荐企业：" prop="qiyeName">
                <el-select v-model="qiyeName" placeholder="请选择" @change="spread_eidChange">
                  <el-option v-for="item in tableData.list" :key="item.name" :label="item.name"
                    :value="{ value: item.id, label: item.name }">
                  </el-option>
                </el-select>
              </el-form-item>
  
              <el-form-item label="公司地址:" prop="address">
                <el-input v-model="Businessform.address" enter-button="查找位置" placeholder="请输入商户地址（地址中请包含城市名称，否则会影响搜索精度）">
                  <el-button slot="append" type="primary" @click="onSearch">查找位置</el-button>
                </el-input>
                <div style="width: 460px;">
                  <Maps v-if="mapKey" ref="mapChild" class="map-sty" :map-key="mapKey"
                    :lat="Number(Businessform.lat || 34.34127)" :lon="Number(Businessform.long || 108.93984)"
                    :address="Businessform.mer_address" @getCoordinates="getCoordinates" />
                </div>
              </el-form-item>
              <el-form-item label="企业密令:" prop="secretorder">
                <el-input v-model="Businessform.secretorder" style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="请上传营业执照:">
                <el-upload class="avatar-uploader" :limit="1" :headers="myHeaders" :action="fileUrl"
                  list-type="picture-card" :on-success="onSuccess">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="Businessform.images" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="showBusiness = false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div> -->
            <div class="taber">
                <el-table :data="tableData.list" style="width: 100%; margin-bottom: 20px" row-key="id"
                    default-expand-all ref="dataTreeList" :tree-props="{ children: 'none', hasChildren: 'none' }">
                    <el-table-column width="20"> </el-table-column>
                    <el-table-column prop="id" label="ID" width="40"> </el-table-column>
                    <el-table-column prop="logo" label="LOGO" width="80">
                        <template slot-scope="scope">
                            <img :src="scope.row.logo" width="30%" class="logo" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="公司名称" min-width="150"> </el-table-column>
                    <el-table-column prop="level" label="渠道类型" min-width="100" :formatter="level"> </el-table-column>
                    <el-table-column prop="username" label="联系人" width="80"> </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="140"> </el-table-column>
                    <el-table-column prop="spreadEnterprise.name" label="推荐企业" width="140"> </el-table-column>
                    <el-table-column prop="area_name" label="区域名称" min-width="100"> </el-table-column>
                    <!-- <el-table-column prop="shop_name" label="店铺类型"> </el-table-column> -->
                    <!-- <el-table-column prop="type_name" label="所属行业" min-width="70"> </el-table-column> -->
                    <!-- <el-table-column :key="Math.random()" label="状态" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.mer_id == 0">正在审核</span>
                <el-switch v-else @change="elsw(scope)" v-model="scope.row.is_show"> </el-switch>
              </template>
            </el-table-column> -->
                    <!-- <el-table-column prop="address" label="公司地址" min-width="180"> </el-table-column> -->
                    <!-- <el-table-column fixed="right" label="操作" width="230">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="onPassword(scope.row.mer_id)">修改管理员密码</el-button>
                <el-button type="text" size="small" @click="onLogo(scope.row.mer_id)">登录</el-button>
                <el-button type="text" size="small" @click="tianjia(scope)">编辑</el-button> -->
                    <!-- <el-button type="text" size="small" @click="tianjiaxj(scope)">添加下级部门</el-button> -->
                    <!-- <el-button type="text" size="small" @click="open(scope)">删除</el-button>
              </template>
            </el-table-column> -->
                </el-table>
            </div>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination :page-sizes="[10, 20, 40, 60, 80]" :page-size="userFrom.limit"
                    :current-page="userFrom.page" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.count" @size-change="handleSizeChange" @current-change="pageChange" />
            </div>
        </el-card>
        <!-- 添加公司 -->
        <!-- <tianJia ref="tianJia" @isok="getenterprise()" /> -->
        <!-- 添加下级部门 -->
        <el-dialog title="添加下级部门" :visible.sync="dialogForm" width="400px">
            <div class="xss">
                <Input v-model="issave.name" placeholder="请输入部门名称" style="width: 300px" />
                <div class="oenter">
                    <el-button @click="inpqudin" type="primary" plain>确定</el-button>
                    <el-button @click="dialogForm = false" type="primary">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 编辑部门 -->
        <el-dialog title="编辑部门" :visible.sync="diaplaynone" width="400px">
            <div class="xss">
                <Input v-model="isdisplay.name" placeholder="请输入部门名称" style="width: 300px" />
                <div class="oenter">
                    <el-button @click="isdisysno" type="primary" plain>确定</el-button>
                    <el-button @click="diaplaynone = false" type="primary">取消</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>
<script>
// import tianJia from './components/tianjia.vue';
import { getEnterprise, tjTitle } from '@/api/buss';
import { getcountList } from "@/api/costList"
//   import {
//     merchantPasswordApi,
//     merchantLoginApi,
//     getMerCateApi,
//   } from "@/api/merchant";
import Cookies from "js-cookie";
import SettingMer from "@/libs/settingMer";
import { getToken } from "@/utils/auth";
//   import Maps from '@/components/map/map.vue'
import { getMapKey, createQiye } from '@/api/setting'
// import Vue from "vue";
// import formCreate from '@form-create/iview';
// Vue.use(formCreate)
// import 'view-design/dist/styles/iview.css';
// import ViewUI from 'view-design';
// Vue.use(ViewUI);

export default {
    components: {
        // tianJia,
        //   Maps
    },
    data() {
        return {
            dialogForm: false,
            diaplaynone: false,
            // form浮动样式
            labelPosition: 'right',
            imageUrl: '',
            myHeaders: {
                "X-Token": getToken()
            },
            // 响应式
            grid: {
                xl: 24,
                lg: 24,
                md: 24,
                sm: 24,
                xs: 24
            },
            Businessform: { // 创建企业信息储存
                logo: '',
                name: '',
                phone: '',
                type_id: '',
                type_name: '',
                secretorder: '',
                address: '',
                images: '',
                area_id: '',
                spread_eid: '',
            },
            qiyeName: '',
            cityName: '',
            cityList: [],
            props: {
                label: 'name',
                value: 'id',
                lazy: true,
                lazyLoad: (node, resolve) => {
                    const { level, value } = node; // 获取当前node对象中的level, value属性
                    this.getArea(level, value, resolve)
                },
                checkStrictly: true
            },
            dialogVisible: false,
            rules: {
                logo: [
                    { required: true, message: '请上传企业Logo', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请填写企业名称', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请填写联系方式', trigger: 'blur' }
                ],
                type_id: [
                    { required: true, message: '请选择企业类型', trigger: 'blur' }
                ],
                secretorder: [
                    { required: true, message: '请填写企业密令', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请选择公司地址', trigger: 'change' }
                ],
                pics: [
                    { required: true, message: '请上传企业资质', trigger: 'blur' }
                ]
            },
            showBusiness: false,
            type_idlist: [],
            value: '',
            formValidate: {
                type: "",
            },
            mapKey: '', // 地图key
            //  公司信息列表
            tableData: {
                data: [],
                count: 0
            },
            issave: {
                name: '',
                pid: '',
                sort: 0,
            },
            isdisplay: {
                name: '',
                pid: '',
                sort: 0,
            },
            eid: '',
            // 搜索内容
            userFrom: {
                // 页数
                //   page: 1,
                //   // 显示多少条
                //   limit: 10,
                //   // 手机号
                //   phone: "",
                //   // 公司名称
                //   name: "",
                //   // 联系人
                //   username: "",
                area_id: 0,// 区域id
                level: 0,
                name: ""
            },
            // 总数量
            total: 100,
            cardList: []
        };
    },
    created() {
        this.getenterprise();
        this.getMapInfo();
        this.gitTitle()
    },
    computed: {
        fileUrl() {
            return (
                SettingMer.https +
                `/upload/image/${0}/file`
            );
        },
    },
    watch: {
        // tableData: {
        //   handler(list) {
        //     if (list.length === 0) {
        //       const newChild = {
        //         children: [],
        //       };
        //       this.tableData.push(newChild);
        //     }
        //   },
        //   immediate: true,
        // },
    },
    methods: {
        gitTitle() {
            tjTitle().then(res => {
                this.cardList = res.data
                console.log(res, '表头');
            }).catch(res => {
                console.log(res, '表头报错');
            })
        },
        spread_eidChange(data) {
            const { value } = data;
            this.Businessform.spread_eid = value
        },
        cityChange(value) {
            this.Businessform.area_id = value[0]
        },
        cityChangesc(value) {
            this.userFrom.area_id = value[0]
            this.getenterprise()
        },
        getArea(level, value, resolve) {
            this.Businessform.area_id = value
            console.log(this.Businessform.area_id);
            getcountList(value)
                .then((res) => {
                    const nodes = res.data
                    if (level == 4) {
                        nodes.forEach(item => {
                            item.leaf = level >= 1
                        })
                    }
                    resolve(nodes)
                })
                .catch((res) => {
                    this.$message.error(res.message);
                });
        },
        establish() {
            this.showBusiness = true
            getcountList(0)
                .then((res) => {
                    this.cityList = res.data
                })
                .catch((res) => {
                    this.$message.error(res.message);
                });
        },
        level(row) {
            switch (row.level) {
                case 0: return '非渠道';
                case 1: return '俱乐部';
                case 2: return '县级代理';
                case 3: return '市级代理';
                case 4: return '省级代理';
            }
        },
        onSubmit() {
            createQiye(this.Businessform).then(res => {
                this.$message.success('创建企业成功')
            }).then(res => {
                this.showBusiness = false
                this.getenterprise()
            }).catch(res => {
                this.$message.error(res.data)
            })
        },
        onSearch() {
            this.$refs.mapChild.searchKeyword(this.Businessform.address)
        },
        onSuccess(res, file) {
            this.Businessform.images = res.data.src
        },
        type_idChange(data) {
            const { value, label } = data;
            this.Businessform.type_id = value
            this.Businessform.type_name = label
        },
        focus() {
            getMerCateApi().then(res => {
                this.type_idlist = res.data
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.Businessform.logo = res.data.src
        },
        beforeAvatarUpload(file) {
            console.log(file, 'file');
            const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
            if (!isJPG) {
                this.$message.error('只能上传图片');
            }
            return isJPG;
        },

        // 上传成功
        handleSuccess(response) {
            if (response.status === 200) {
                this.$message.success("上传成功");
                this.imageUrl = res.data.src
            } else {
                this.$message.error(response.message);
            }
        },
        // 获取 map key
        getMapInfo() {
            const that = this
            getMapKey()
                .then((res) => {
                    this.mapKey = res.data.tx_map_key
                    if (!res.data.tx_map_key) {
                        this.$message.error('请配置地图key')
                    }
                })
                .catch(function (res) {
                    that.$message.error(res.message)
                })
        },
        // 选择经纬度
        selectAdderss(data) {
            this.merData.mer_take_location = data.latlng.lat + ',' + data.latlng.lng
            this.modalMap = false
        },
        // 地图信息获取
        getCoordinates(data) {
            // this.merData.mer_address = data.address;
            this.Businessform.lat = data.location.lat || 34.34127
            this.Businessform.long = data.location.lng || 108.93984
            console.log(data)
        },
        // 修改密码表单
        onPassword(id) {
            this.$modalForm(merchantPasswordApi(id));
        },
        // 登录
        onLogo(id) {
            merchantLoginApi(id)
                .then(res => {
                    Cookies.set("merchantToken", res.data.token);
                    window.open(SettingMer.httpUrl + res.data.url);
                })
                .catch(res => {
                    console.log(res, 'denlu');
                    this.$message.error(res.message);
                });
        },
        // 搜索
        userSearchs() {
            this.getenterprise()
        },
        // 重置
        reset() {
            this.userFrom = {
                page: 1,
                limit: 10,
                phone: "",
                nickname: ""
            }
            this.getenterprise()
        },
        // 更好展示页面
        pageChange(page) {
            this.userFrom.page = page
            this.getenterprise();
        },
        // 更换展示数量
        handleSizeChange(val) {
            this.userFrom.limit = val
            this.getenterprise();
        },
        // 是否上架
        elsw(e) {
            is_show(e.row.id).then((res) => {
                if (res.status == 200) {
                    this.getenterprise();
                    this.$message({
                        type: 'success',
                        message: '操作成功!',
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message,
                    });
                }

            });
        },
        // 添加下级部门
        tianjiaxj(e) {
            console.log(e.row, "scope")
            let chil = e.row.address;
            console.log(chil, "chil")
            if (chil) {
                this.issave.pid = e.row.id;
                this.dialogForm = true;
            } else {
                if (e.row.children) {
                    this.issave.pid = e.row.children.id;
                    this.dialogForm = true;
                } else {
                    this.issave.pid = e.row.id;
                    this.dialogForm = true;
                }
            }
        },
        inpqudin() {
            i_save(this.issave).then((res) => {
                this.dialogForm = false;
                this.getenterprise();
            });
        },
        // 公司信息列表
        getenterprise() {
            console.log("获取列表", this.userFrom)
            getEnterprise(this.userFrom).then((res) => {
                console.log(res, "res")
                this.tableData = res.data
                console.log(this.tableData, 'tableData')
                // this.tableData = res.data.list;
                this.tableData.list.map((item, index) => {
                    item.is_show = item.is_show == 1 ? true : false;
                });
            });
        },

        open(scope) {
            console.log(scope)
            var f = this.$confirm('你确认要删除吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                i_delete(scope.row.id).then((res) => {
                    if (res.status == 200) {
                        this.getenterprise();
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message,
                        });
                    }

                })
            })
                .catch((err) => {
                    console.log(err)
                    this.$message({
                        type: 'info',
                        message: '删除失败',
                    })
                })
        },
        tianjia(e) {
            this.$modalForm(editEnterprise(e.row.id)).then(() => this.getenterprise())
            // console.log(e,111);
            // if (num == 0) {
            //   this.$refs.tianJia.yesno(num);
            // } else {
            //   let chil = e.row.address;
            //   console.log(chil, 22);
            //   if (!chil) {
            //     this.diaplaynone = true;
            //     this.isdisplay.name = e.row.name;
            //     this.isdisplay.pid = e.row.pid;
            //     this.eid = e.row.id;
            //   } else {
            //     this.$refs.tianJia.yesno(num, e.row);
            //   }
            // }
        },
        isdisysno() {
            i_edit(this.eid, this.isdisplay).then((res) => {
                this.diaplaynone = false;
                this.getenterprise();
            });
        },

    },
};
</script>
<style lang="scss" scoped>
.addBusiness {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);

    .Business_cont {
        height: 70vh;
        width: 50vw;
        position: fixed;
        top: 25vh;
        left: 25vw;
        overflow-y: scroll;
    }
}

.map-sty {
    width: 100%;
}

::v-deep.el-upload-list__item {
    height: 50px;
    width: 50px;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 40px !important;
    width: 40px;
    line-height: 40px !important;
}

::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.el-icon-plus {
    height: 40px;
    width: 40px;
}

::v-deep .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

;

::v-deep .avatar {
    width: 40px;
    height: 40px;
    display: block;
}

;

::v-deep .el-card__body {
    padding: 0 0 20px 0;
}

.block {
    padding-right: 20px;
}

.tianjzw {
    padding: 0px 20px;

    .oinpiut {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0px;

        span {
            width: 100px
        }
    }

    .annui {
        padding: 10px 0px;
        text-align: center;

        /deep/.el-button--primary {
            margin-right: 0px !important;
        }
    }

}

.xss {
    margin: auto;
    text-align: center;

    /deep/.ivu-input-wrapper {
        padding-bottom: 20px;

    }

    .oenter {
        text-align: center;

        /deep/.el-button--primary {
            margin-right: 0px !important;
        }
    }
}

.taber {
    background-color: #fff;

    /deep/.el-table th.el-table__cell {
        background-color: rgb(245, 247, 250)
    }


}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.expand-row {
    margin-bottom: 16px;
}

::v-deep.button,
html [type="button"],
[type="reset"],
[type="submit"] {
    margin-right: 0px
}

.odiv {
    background-color: #fff;
    padding: 20px 20px;
    margin: 20px 10px;
    border-radius: 5px;

    span {
        margin-left: 20px;
    }

    .opsn {
        color: #409eff;
        font-weight: 500;
    }
}

.sousuo {
    margin: 20px 10px;
    background-color: #fff;
    padding: 5px 32px;

    .shond {
        height: 60px;
        border-bottom: 1px solid #E1E1E1;
        margin-bottom: 20px;
        line-height: 60px;
    }

    .soudiv {
        margin: 10px 0px;
        border: 1px solid #E1E1E1;
        padding: 20px 32px;
        display: flex;
        align-items: center;

        div {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                display: block;
                width: 45px;
                text-align: right;
                vertical-align: middle;
                font-size: 14px;
                line-height: 40px;
                padding: 0 12px 0 0;
            }
        }

        div:nth-child(1) {
            span {
                width: 100px;
            }
        }

        .el-button {
            margin-left: 20px;
        }
    }
}

.logo {
    width: 50px;
    height: 50px;
}

.card_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /*justify-content: center*/
    padding: 25px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #f5f7f9;

    .card_box_cir {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        .card_box_cir1 {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
    }

    .card_box_txt {
        .sp1 {
            display: block;
            color: #252631;
            font-size: 24px;
            line-height: 37px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sp2 {
            display: block;
            color: #000000;
            font-size: 12px;
        }
    }
}

.one {
    background: #e4ecff;
}

.two {
    background: #fff3e0;
}

.three {
    background: #eaf9e1;
}

.four {
    background: #ffeaf4;
}

.five {
    background: #f1e4ff;
}

.one1 {
    background: #4d7cfe;
}

.two1 {
    background: #ffab2b;
}

.three1 {
    background: #6dd230;
}

.four1 {
    background: #ff85c0;
}

.five1 {
    background: #b37feb;
}
</style>